<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multimedia Player</title>
</head>

<body>
    <h1>Multimedia Player</h1>
    <section>
        <h2>Now Playing: Sailing Away</h2>
        <audio controls aria-label="Sailing Away, a exciting music.">
            <source src="https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3" type="audio/mp3">
        </audio>
    </section>
    <section>
        <h2>What is a map method and how does it work?</h2>
        <video width="400" controls aria-label="An introduce to map method.">
            <source src="https://cdn.freecodecamp.org/curriculum/labs/What is the map method and how does it work.mp4" type="video/mp4">
            <track src="https://cdn.freecodecamp.org/curriculum/labs/what-is-a-map-method.vtt"
                kind="subtitles"
                srclang="en"
                label="English"
            ></track>
        </video>
    </section>
    <section>
        <h2>Transcipt</h2>
        <p>What is a map method and how does it work? The map method is a powerful and widely used function in JavaScript that operates on arrays. It's designed to create a new array by applying a given function to each element of the original array. This method does not modify the original array, but instead returns the new array containing the results of the function applied to each element.</p>
    </section>
</body>

</html>